<template>
  <div id="container">
    <SingleUploader :onBeforeUpload="onlyImage"></SingleUploader>
    <Base64SingleUploader :onBeforeUpload="onlyImage"></Base64SingleUploader>
    <AbbrSingleUploader :onBeforeUpload="onlyImage"></AbbrSingleUploader>
    <ProgressSingleUploader></ProgressSingleUploader>
    <MultiUploader></MultiUploader>
    <DragUploader></DragUploader>
    <BigFileUploader :onBeforeUpload="onlyAvi"></BigFileUploader>
  </div>
</template>

<script>
import SingleUploader from "@/components/SingleUploader.vue";
import Base64SingleUploader from "@/components/Base64SingleUploader.vue";
import AbbrSingleUploader from "@/components/AbbrSingleUploader.vue";
import ProgressSingleUploader from "@/components/ProgressSingleUploader.vue";
import MultiUploader from "@/components/MultiUploader.vue";
import DragUploader from "@/components/DragUploader.vue";
import BigFileUploader from "@/components/BigFileUploader.vue";

export default {
  methods: {
    onlyImage(file) {
      return this.checkSuffix(/PNG|JPG|JPEG/i, file);
    },
    onlyAvi(file) {
      return this.checkSuffix(/avi/i, file);
    },
    checkSuffix(re, file) {
      if (!re.test(file.type)) {
        this.$message({
          type: "error",
          message: `上传的文件只能是${re.toString().slice(1).slice(0, -2)}格式`,
        });
        return false;
      }
      return true;
    }
  },
  components: {
    SingleUploader,
    Base64SingleUploader,
    AbbrSingleUploader,
    ProgressSingleUploader,
    MultiUploader,
    DragUploader,
    BigFileUploader,
  },
};
</script>

<style scoped>
#container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>